<!--
 * @Date: 2020-08-08 11:17:34
 * @LastEditors: 舟玉成
 * @写好代码的烂程序员: ↑
 * @LastEditTime: 2020-08-08 17:18:06
-->
<template>
  <div class="recommend">
    <!-- <div class="lunbo" :style="{'background':'url('+item.imageUrl+')'}"> -->
    <div class="lunbo" >
      <div class="LBtao">
        <div class="block"> 
        <!-- <span class="demonstration">Click 指示器触发</span> -->
          <el-carousel trigger="click" height="283px" @change="lunboChange">
            <el-carousel-item v-for="item in banners" :key="item.id">
            <!-- <el-carousel-item> -->
              <!-- <h3 class="small"><img :src="item.imageUrl" alt=""></h3> -->
              <img :src="item.imageUrl" alt="" >
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="xiazai">
        </div>
      </div>
    </div>



    <div class="mid-main" style="width:980px;height:1690px;background:#fff;margin:0 auto;">
      <div class="left" style="float:left;padding-left:5px;border:1px solid #ccc;padding-bottom:35px">
        <div class="hotTJ" style="width:729px;height:523px;background:#fff;padding-top:15px">
        <hotTJ></hotTJ>
      </div>
      <div class="selfdom" style="width:729px;height:305px;background:#fff">
        <selfdom></selfdom>
      </div>
      <div class="newDie" style="width:729px;height:243px;background:#fff">
        <newDie></newDie>
        <div style="clear:both"></div>
      </div>
       <div class="list" style="width:729px;height:527px;background:#fff;margin-top:40px">
         <list></list>
      </div>
      </div>
      <div class="rightTao" style="width:242px;height:1688px;background:#fff;float:left;border:1px solid #ccc">
        <div class="right">
          <right></right>
        </div>
      </div>
    </div>




  </div>
</template>
<script>
import hotTJ from "./hotTJ/index"
import selfdom from './selfdom/index'
import newDie from './newDie/index'
import list from './list/index'
import right from './right/index'
export default {
  data: () => ({
    banners:[],
    x:0
  }),
  created() {
    this.postLunbo()
  },
  methods: {
    //获取轮播图的接口
    async postLunbo(){
      try {
        const data=await this.Api.cyzApi.postLunbo()
        // console.log(data.data.banners)
        this.banners=data.data.banners
      } catch (error) {
        alert("请求轮播图数据失败"+error)
      }
    },
    //轮播图与背景图双向绑定
    lunboChange(x,y){
      // console.log(x,y)
      this.x=x
      // console.log(this.x)
      let lunbo=document.querySelector(".lunbo")
      // lunbo.style.backgroundImage=`url(../../../../../assets/cyzimgs/${x}.jpg)`
      
    }
  },
  components:{
    hotTJ,
    selfdom,
    newDie,
    list,
    right
  }
};
</script>
<style lang="less">
.recommend{
  .lunbo{
    // background-image: url('../../../assets/cyzimgs/6.jpg');
    background-size: 100% 150%;
    width: 100%;
    height: 283px;
    overflow: hidden;
    .LBtao{
      width: 980px;
      margin: 0 auto;
      overflow: hidden;
      .block{
      width: 735px;
      .beijingT{
        position: relative;
        z-index: 1;
          width: 10px;
          height: 283px;
          background: red;
        }
      .el-carousel__container{
        position: relative;
        z-index: 500;
        img{
          width: 100%;
          height: 100%;

          //模糊
          filter: blur(0);
        }
      }
      .el-carousel__button{
        height: 6px;
        width: 6px;
        border-radius: 50%;
      }
      .el-carousel__arrow{
        width: 30px;
        height: 60px;
        border-radius: 1px;
      }
      .el-carousel__arrow--left{
        position: absolute;
        // left: 0px; 
        z-index: 6000;
      }
    }
    .xiazai{
      position: absolute;
      top: 105px;
     right: 270px;
    z-index: 700;
    width: 245px;
      height: 283px;
      background: url('../../../assets/cyzimgs/xiazai.png');
    // background-position:50% 50% ;
      }
    }
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  }
}
</style>
